<template>
    <a-modal title="输入耗材明细" :visible="visible" @cancel="onClose" @ok="handleAdd">
        <a-form-model ref="form" :model="form" :rules="rules">
            <a-form-model-item label="品名" prop="device">
                <a-input v-model="form.device" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="规格" prop="size">
                <a-input v-model="form.size" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="数量" prop="count">
                <a-input-number v-model="form.count" style="width: 100%;" placeholder="请输入" />
            </a-form-model-item>
        </a-form-model>
    </a-modal>
</template>

<script>
export default {
    props: {
        text: Object,
    },
    components: {
    },
    data() {
        return {
            visible: false,
            form: {
                device: undefined,
                count: undefined,
                size: undefined
            },
            rules: {
                device: [{ required: true, message: '品名不能为空', trigger: 'blur' }],
                count: [{ required: true, message: '规格不能为空', trigger: 'blur' }],
                size: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
            },
        };
    },
    created() {
    },
    watch: {
        'text': function (val) {
            this.form = { ...val }
        }
    },
    methods: {
        onClose() {
            this.visible = false;
            this.form = {
                device: undefined,
                count: undefined,
                size: undefined
            }
        },
        open(type) {
            this.visible = true;
            this.type = type
            if (type === 1) {
                this.form = {
                    key: undefined,
                    device: undefined,
                    count: undefined,
                    size: undefined
                }
            }
        },
        handleAdd() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    console.log(this.form);
                    if (this.type === 1) {
                        this.$emit('add', this.form)
                    } else {
                        this.$emit('edit', this.form)
                    }
                    this.onClose()
                } else {
                    return false
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped></style>